<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>webpack构建vue项目 | 雨落</title>
  <meta name="description" content="webpack构建vue项目基本安装 npm i &amp;#x77;&amp;#x65;&amp;#98;&amp;#x70;&amp;#x61;&amp;#x63;&amp;#x6b;&amp;#64;&amp;#x34;&amp;#46;&amp;#48;&amp;#46;&amp;#48; webpack-cli –save-dev npm i vue –save  创建vue项目的基本结构1234+ src    + views    + App.vue    + main.js 编写ma">
<meta property="og:type" content="article">
<meta property="og:title" content="webpack构建vue项目">
<meta property="og:url" content="https://gitee.com/Yu-Luoboke/2021/03/09/webpack%E6%9E%84%E5%BB%BAvue%E9%A1%B9%E7%9B%AE/index.html">
<meta property="og:site_name" content="雨落">
<meta property="og:description" content="webpack构建vue项目基本安装 npm i &amp;#x77;&amp;#x65;&amp;#98;&amp;#x70;&amp;#x61;&amp;#x63;&amp;#x6b;&amp;#64;&amp;#x34;&amp;#46;&amp;#48;&amp;#46;&amp;#48; webpack-cli –save-dev npm i vue –save  创建vue项目的基本结构1234+ src    + views    + App.vue    + main.js 编写ma">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-03-09T07:15:42.000Z">
<meta property="article:modified_time" content="2021-03-10T03:51:40.572Z">
<meta property="article:author" content="lianghongming">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="https://gitee.com/Yu-Luoboke/2021/03/09/webpack%E6%9E%84%E5%BB%BAvue%E9%A1%B9%E7%9B%AE/index.html">
  
    <link rel="alternate" href="/atom.xml" title="雨落" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png" type="image/x-icon">
  
  
<link rel="stylesheet" href="/blog/css/style.css">

  
  
  
  
<meta name="generator" content="Hexo 5.2.0"></head>


<body class="main-center" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="http://yu-luoboke.gitee.io/blog" target="_blank">
          <img class="img-circle img-rotate" src="/blog/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">雨落</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">前端开发-奋斗青年</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> GuangZhou, China</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/blog/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/blog/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/blog/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="http://yu-luoboke.gitee.io/blog" target="_blank" title="Github" ><i class="icon icon-github"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>欢迎交流与分享经验!</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Git/">Git</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/HTML-CSS/">HTML + CSS</a><span class="category-list-count">7</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/JVM%EF%BC%88Java%E8%99%9A%E6%8B%9F%E6%9C%BA%EF%BC%89-%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6%E7%AE%97%E6%B3%95/">JVM（Java虚拟机）-垃圾回收算法</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Node/">Node</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Project/">Project</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/React/">React</a><span class="category-list-count">4</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/SVN/">SVN</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Vue-typescript/">Vue-typescript</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/gitee/">gitee</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/iOS/">iOS</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/js/">js</a><span class="category-list-count">12</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/vue/">vue</a><span class="category-list-count">13</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/web-serve%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E6%9C%8D%E5%8A%A1%E5%99%A8/">web serve静态资源服务器</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/webpack/">webpack</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%89%8D%E7%AB%AF%E8%87%AA%E5%8A%A8%E5%8C%96/">前端自动化</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E5%B0%8F%E7%A8%8B%E5%BA%8F/">小程序</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E7%A7%BB%E5%8A%A8%E7%AB%AF/">移动端</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E7%BB%8F%E9%AA%8C/">经验</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a><span class="category-list-count">4</span></li></ul>
    </div>
  </div>


    
      

    
      
    
      
  <div class="widget">
    <h3 class="widget-title">归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2024/04/">四月 2024</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/11/">十一月 2023</a><span class="archive-list-count">8</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2023/09/">九月 2023</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/12/">十二月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/08/">八月 2022</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/07/">七月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/06/">六月 2022</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/04/">四月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2022/01/">一月 2022</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/12/">十二月 2021</a><span class="archive-list-count">4</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/11/">十一月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/10/">十月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/04/">四月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/03/">三月 2021</a><span class="archive-list-count">3</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/02/">二月 2021</a><span class="archive-list-count">1</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2021/01/">一月 2021</a><span class="archive-list-count">6</span></li><li class="archive-list-item"><a class="archive-list-link" href="/blog/archives/2020/12/">十二月 2020</a><span class="archive-list-count">15</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled no-thumbnail">
        
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blog/categories/HTML-CSS/">HTML + CSS</a>
              </p>
              <p class="item-title">
                <a href="/blog/2024/04/15/%E6%8B%96%E5%8A%A8%E5%92%8C%E7%82%B9%E5%87%BB%E5%BC%B9%E7%AA%97/" class="title">拖动和点击弹窗</a>
              </p>
              <p class="item-date">
                <time datetime="2024-04-15T12:22:06.000Z" itemprop="datePublished">2024-04-15</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>
              </p>
              <p class="item-title">
                <a href="/blog/2023/11/29/html%E9%9D%A2%E8%AF%95%E9%A2%98/" class="title">html面试题</a>
              </p>
              <p class="item-date">
                <time datetime="2023-11-29T15:58:27.000Z" itemprop="datePublished">2023-11-29</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>
              </p>
              <p class="item-title">
                <a href="/blog/2023/11/29/css%E9%9D%A2%E8%AF%95%E9%A2%98/" class="title">css面试题</a>
              </p>
              <p class="item-date">
                <time datetime="2023-11-29T15:57:17.000Z" itemprop="datePublished">2023-11-29</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>
              </p>
              <p class="item-title">
                <a href="/blog/2023/11/29/js%E9%9D%A2%E8%AF%95%E9%A2%98/" class="title">js面试题</a>
              </p>
              <p class="item-date">
                <time datetime="2023-11-29T15:37:30.000Z" itemprop="datePublished">2023-11-29</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blog/categories/%E9%9D%A2%E8%AF%95%E9%A2%98/">面试题</a>
              </p>
              <p class="item-title">
                <a href="/blog/2023/11/29/%E9%9D%A2%E8%AF%95%E9%A2%98/" class="title">面试题</a>
              </p>
              <p class="item-date">
                <time datetime="2023-11-29T15:29:49.000Z" itemprop="datePublished">2023-11-29</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-webpack构建vue项目" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      webpack构建vue项目
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/blog/2021/03/09/webpack%E6%9E%84%E5%BB%BAvue%E9%A1%B9%E7%9B%AE/" class="article-date">
	  <time datetime="2021-03-09T07:15:42.000Z" itemprop="datePublished">2021-03-09</time>
	</a>
</span>
        
  <span class="article-category">
    <i class="icon icon-folder"></i>
    <a class="article-category-link" href="/blog/categories/webpack/">webpack</a>
  </span>

        

        

        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/blog/2021/03/09/webpack%E6%9E%84%E5%BB%BAvue%E9%A1%B9%E7%9B%AE/#comments" class="article-comment-link">评论</a></span>
        
      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h1 id="webpack构建vue项目"><a href="#webpack构建vue项目" class="headerlink" title="webpack构建vue项目"></a>webpack构建vue项目</h1><h3 id="基本安装"><a href="#基本安装" class="headerlink" title="基本安装"></a>基本安装</h3><ul>
<li>npm i <a href="mailto:&#x77;&#x65;&#98;&#x70;&#x61;&#x63;&#x6b;&#64;&#x34;&#46;&#48;&#46;&#48;">&#x77;&#x65;&#98;&#x70;&#x61;&#x63;&#x6b;&#64;&#x34;&#46;&#48;&#46;&#48;</a> webpack-cli –save-dev</li>
<li>npm i vue –save</li>
</ul>
<h3 id="创建vue项目的基本结构"><a href="#创建vue项目的基本结构" class="headerlink" title="创建vue项目的基本结构"></a>创建vue项目的基本结构</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">+ src</span><br><span class="line">    + views</span><br><span class="line">    + App.vue</span><br><span class="line">    + main.js</span><br></pre></td></tr></table></figure>
<h3 id="编写main-js文件，导入vue，将vue挂载到根节点"><a href="#编写main-js文件，导入vue，将vue挂载到根节点" class="headerlink" title="编写main.js文件，导入vue，将vue挂载到根节点"></a>编写main.js文件，导入vue，将vue挂载到根节点</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Vue <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"><span class="keyword">import</span> App <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span></span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = <span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">    render: <span class="function"><span class="params">h</span> =&gt;</span> h(App)</span><br><span class="line">&#125;).$mount(<span class="string">&#x27;#app&#x27;</span>)</span><br></pre></td></tr></table></figure>

<h3 id="编写APP-vue文件"><a href="#编写APP-vue文件" class="headerlink" title="编写APP.vue文件"></a>编写APP.vue文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=<span class="string">&quot;app&quot;</span>&gt;&#123;&#123;value&#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      value: <span class="string">&quot;这是页面&quot;</span>,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h3 id="创建webpack-config-js"><a href="#创建webpack-config-js" class="headerlink" title="创建webpack.config.js"></a>创建webpack.config.js</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 添加入口，出口，mode</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="built_in">module</span>.exports = &#123;</span><br><span class="line">    mode: <span class="string">&#x27;development&#x27;</span>,</span><br><span class="line">    entry: <span class="string">&#x27;./src/main.js&#x27;</span>,</span><br><span class="line">    output: &#123;</span><br><span class="line">        path: path.join(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">        filename: <span class="string">&#x27;js/bundle.js&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="package-json-配置打包命令"><a href="#package-json-配置打包命令" class="headerlink" title="package.json 配置打包命令"></a>package.json 配置打包命令</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;script&quot;</span>: &#123; <span class="string">&quot;build&quot;</span>:<span class="string">&quot;webpack&quot;</span> &#125; <span class="comment">// webpack.config.js 中配置mode=&quot;development&quot;</span></span><br><span class="line"><span class="string">&quot;script&quot;</span>: &#123; <span class="string">&quot;build&quot;</span>:<span class="string">&quot;webpack --mode=producton&quot;</span> &#125;  <span class="comment">// webpack.config.js 没有中配置mode属性</span></span><br></pre></td></tr></table></figure>


<h3 id="执行打包命令：npm-run-build"><a href="#执行打包命令：npm-run-build" class="headerlink" title="执行打包命令：npm run build"></a>执行打包命令：npm run build</h3><ul>
<li>build:”webpack”  默认运行的webpack.config.js , 等价于 build:”webpack –config webpack.config.js”<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">发现报错：You may need an appropriate loader to handle <span class="built_in">this</span> file type, currently no loaders are configured to process <span class="built_in">this</span> file. See https:<span class="comment">//webpack.js.org/concepts#loaders</span></span><br><span class="line"></span><br><span class="line">&gt; &lt;template&gt;</span><br><span class="line">|   <span class="xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span>这是app.vue页面<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">| &lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 那是因为没有安装处理vue对应的loader</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="安装vue-loader处理-vue文件"><a href="#安装vue-loader处理-vue文件" class="headerlink" title="安装vue-loader处理.vue文件"></a>安装vue-loader处理.vue文件</h3><ul>
<li>npm install vue-loader –save-dev<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 添加loader</span></span><br><span class="line"><span class="built_in">module</span>: &#123;</span><br><span class="line">            rules: [&#123;</span><br><span class="line">                test: <span class="regexp">/\.vue$/</span>,</span><br><span class="line">                use: <span class="string">&#x27;vue-loader&#x27;</span></span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;,</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h3 id="执行打包命令"><a href="#执行打包命令" class="headerlink" title="执行打包命令"></a>执行打包命令</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 发现报错</span></span><br><span class="line">[vue-loader] vue-template-compiler must be installed <span class="keyword">as</span> a peer dependency, or a compatible compiler implementation must be passed via options.</span><br><span class="line"></span><br><span class="line"><span class="comment">// 从报错看出需要安装：vue-template-compiler</span></span><br></pre></td></tr></table></figure>

<h3 id="安装模板解析：vue-template-compiler"><a href="#安装模板解析：vue-template-compiler" class="headerlink" title="安装模板解析：vue-template-compiler"></a>安装模板解析：vue-template-compiler</h3><ul>
<li>npm i vue-template-compiler -D</li>
</ul>
<h3 id="执行打包命令-1"><a href="#执行打包命令-1" class="headerlink" title="执行打包命令"></a>执行打包命令</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 发现如下报错：</span></span><br><span class="line">vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin <span class="keyword">in</span> your webpack config.</span><br><span class="line"></span><br><span class="line"><span class="comment">// webpack.config.js配置文件中没有配置VueLoaderPlugin插件</span></span><br><span class="line"><span class="comment">//  webpack.config.js 配置文件添加：const VueLoaderPlugin = require(&#x27;vue-loader/lib/plugin&#x27;)</span></span><br></pre></td></tr></table></figure>

<h3 id="执行打包，打包成功，根目录出现dist文件夹"><a href="#执行打包，打包成功，根目录出现dist文件夹" class="headerlink" title="执行打包，打包成功，根目录出现dist文件夹"></a>执行打包，打包成功，根目录出现dist文件夹</h3><h3 id="使用自己的html文件作为模板，安装生成html插件：html-webpack-plugin"><a href="#使用自己的html文件作为模板，安装生成html插件：html-webpack-plugin" class="headerlink" title="使用自己的html文件作为模板，安装生成html插件：html-webpack-plugin"></a>使用自己的html文件作为模板，安装生成html插件：html-webpack-plugin</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">npm i html-webpack-plugin --save-dev</span><br><span class="line"><span class="comment">// 项目根目录中创建public目录，并创建index.html做为模板文件，里面可以使用模板语法</span></span><br><span class="line"><span class="comment">// 配置</span></span><br><span class="line">plugins:[</span><br><span class="line">    <span class="keyword">new</span> htmlWebpackPlugin(&#123;</span><br><span class="line">        title: <span class="string">&quot;标题&quot;</span>,</span><br><span class="line">        filename: <span class="string">&#x27;public/index.html&#x27;</span> <span class="comment">// 不设置，默认生成index.html文件</span></span><br><span class="line">        template: <span class="string">&#x27;./public/index.html&#x27;</span></span><br><span class="line">    &#125;)</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

<h3 id="执行打包命令-2"><a href="#执行打包命令-2" class="headerlink" title="执行打包命令"></a>执行打包命令</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 报错</span></span><br><span class="line">[webpack-cli] <span class="built_in">TypeError</span>: Cannot read property <span class="string">&#x27;tap&#x27;</span> <span class="keyword">of</span> <span class="literal">undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 原因：html-webpack-plugin(5.2.0) 版本和webpac(4.46)版本不兼容</span></span><br><span class="line"><span class="comment">// 解决方法：降低html-webpack-plugin 版本 npm i html-webpack-plugin@4 -D</span></span><br></pre></td></tr></table></figure>

<h3 id="执行打包命令，打包成功，根目录生成dist目录"><a href="#执行打包命令，打包成功，根目录生成dist目录" class="headerlink" title="执行打包命令，打包成功，根目录生成dist目录"></a>执行打包命令，打包成功，根目录生成dist目录</h3><h3 id="clean-webpack-plugin-清除之前打包构建出来的文件"><a href="#clean-webpack-plugin-清除之前打包构建出来的文件" class="headerlink" title="clean-webpack-plugin 清除之前打包构建出来的文件"></a>clean-webpack-plugin 清除之前打包构建出来的文件</h3><ul>
<li>yarn add clean-webpack-plugin -D</li>
</ul>
<h3 id="安装webpack静态资源服务：webpack-dev-server-开启服务，访问打包出来的文件"><a href="#安装webpack静态资源服务：webpack-dev-server-开启服务，访问打包出来的文件" class="headerlink" title="安装webpack静态资源服务：webpack-dev-server 开启服务，访问打包出来的文件"></a>安装webpack静态资源服务：webpack-dev-server 开启服务，访问打包出来的文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">yarn add webpack-dev-server -D</span><br><span class="line"><span class="comment">// package.json 配置启动命令</span></span><br><span class="line"><span class="string">&quot;dev&quot;</span>: <span class="string">&quot;webpack serve --open&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="开启模块热更新"><a href="#开启模块热更新" class="headerlink" title="开启模块热更新"></a>开启模块热更新</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// webpack.config.js</span></span><br><span class="line">devServer: &#123;</span><br><span class="line">    historyApiFallback: <span class="literal">true</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 修改scripts命令，添加--hot</span></span><br><span class="line"><span class="string">&quot;dev&quot;</span>: <span class="string">&quot;webpack serve --hot --open&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="使用watch-mode-观察者模式"><a href="#使用watch-mode-观察者模式" class="headerlink" title="使用watch mode(观察者模式)"></a>使用watch mode(观察者模式)</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 作用：如果文件被更新，代码被重新打包编译，无需手动整个构建过程</span></span><br><span class="line"><span class="comment">// package.json文件中添加如下配置即可</span></span><br><span class="line"><span class="string">&quot;watch&quot;</span>: <span class="string">&quot;webpack --watch&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h3><ul>
<li>启动项目: npm run dev</li>
<li>开启观察者模式：npm run watch</li>
<li>最终效果：修改文件内容（如App.vue)，浏览器上的内容跟着修改实时改变</li>
</ul>
<h3 id="添加css-loader-style-loader，处理样式"><a href="#添加css-loader-style-loader，处理样式" class="headerlink" title="添加css-loader,style-loader，处理样式"></a>添加css-loader,style-loader，处理样式</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add css-loader style-loader -D</span><br></pre></td></tr></table></figure>

<h3 id="es6转es5"><a href="#es6转es5" class="headerlink" title="es6转es5"></a>es6转es5</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-core babel-loader babel-runtime babel-preset-es2015 babel-plugin-transform-runtime --save-dev </span><br><span class="line"><span class="comment">// babel默认只会转换JavaScript语法，但Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译，如果需要使用这些新的方法和对象，则需要使用babel-runtime：则要安装babel-runtime，babel-plugin-transform-runtime(将文件搬到单独的babel-runtime中，能减少项目的体积)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 项目根目录创建.bebelrc文件</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="string">&quot;presets&quot;</span>: [<span class="string">&quot;es2015&quot;</span>],</span><br><span class="line">    <span class="string">&quot;plugins&quot;</span>: [<span class="string">&quot;transform-runtime&quot;</span>]</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 配置rules规则</span></span><br></pre></td></tr></table></figure>

<h3 id="生产环境压缩css文件，提取样式到单独的文件"><a href="#生产环境压缩css文件，提取样式到单独的文件" class="headerlink" title="生产环境压缩css文件，提取样式到单独的文件"></a>生产环境压缩css文件，提取样式到单独的文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add css-minimizer-webpack-plugin mini-css-extract-plugin -D</span><br></pre></td></tr></table></figure>

<h3 id="生产环境打包js文件"><a href="#生产环境打包js文件" class="headerlink" title="生产环境打包js文件"></a>生产环境打包js文件</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add uglifyjs-webpack-plugin -D</span><br></pre></td></tr></table></figure>

<h3 id="处理图片资源"><a href="#处理图片资源" class="headerlink" title="处理图片资源"></a>处理图片资源</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add url-loader file-loader --save-dev</span><br></pre></td></tr></table></figure>

<h3 id="打包后图片加载不出来"><a href="#打包后图片加载不出来" class="headerlink" title="打包后图片加载不出来"></a>打包后图片加载不出来</h3><ul>
<li>img 便签的src 变为[object Module] , 需要在配置图片loader后面添加esModule: false</li>
<li>背景图片加载不出来，在css-laoder配置中添加publicPath:”../“，这里的路径根据自己的实际目录进行修改</li>
</ul>
<h3 id="完整的webpack-config-js"><a href="#完整的webpack-config-js" class="headerlink" title="完整的webpack.config.js"></a>完整的webpack.config.js</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">&#x27;path&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> VueLoaderPlugin = <span class="built_in">require</span>(<span class="string">&#x27;vue-loader/lib/plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> htmlWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;html-webpack-plugin&#x27;</span>) <span class="comment">// 生成html插件</span></span><br><span class="line"><span class="comment">// 在生产模式下，css文件会被压缩</span></span><br><span class="line"><span class="keyword">const</span> CssMinimizerPlugin = <span class="built_in">require</span>(<span class="string">&#x27;css-minimizer-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="comment">// 将css文件提取到单个文件</span></span><br><span class="line"><span class="keyword">const</span> MiniCssExtractPlugin = <span class="built_in">require</span>(<span class="string">&#x27;mini-css-extract-plugin&#x27;</span>)</span><br><span class="line"><span class="comment">// 生产模式下打包js代码</span></span><br><span class="line"><span class="keyword">const</span> uglifyjsWebpackPlugin = <span class="built_in">require</span>(<span class="string">&#x27;uglifyjs-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> &#123;</span><br><span class="line">    CleanWebpackPlugin</span><br><span class="line">&#125; = <span class="built_in">require</span>(<span class="string">&#x27;clean-webpack-plugin&#x27;</span>)</span><br><span class="line"><span class="keyword">const</span> env = process.env.NODE_ENV === <span class="string">&#x27;production&#x27;</span> ? <span class="string">&#x27;production&#x27;</span> : <span class="string">&quot;development&quot;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="built_in">module</span>.exports = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        mode: env,</span><br><span class="line">        entry: <span class="string">&#x27;./src/main.js&#x27;</span>,</span><br><span class="line">        output: &#123;</span><br><span class="line">            path: path.join(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">            filename: <span class="string">&#x27;js/[hash:8]bundle.js&#x27;</span></span><br><span class="line">        &#125;,</span><br><span class="line">        devtool: env === <span class="string">&#x27;development&#x27;</span> ? <span class="string">&quot;eval-nosources-cheap-source-map&quot;</span> : <span class="string">&quot;source-map&quot;</span>,</span><br><span class="line">        <span class="built_in">module</span>: &#123;</span><br><span class="line">            rules: [&#123;</span><br><span class="line">                test: <span class="regexp">/\.css$/</span>,</span><br><span class="line">                <span class="comment">// use: [&#x27;style-loader&#x27;, &#x27;css-loader&#x27;] // 使用了mini-css-extract-plugin，需替换掉style-loader</span></span><br><span class="line">                use: [&#123;</span><br><span class="line">                    loader: MiniCssExtractPlugin.loader,</span><br><span class="line">                    options: &#123;</span><br><span class="line">                        <span class="comment">// publicPath: &#x27;../&#x27;, // 组件异步引入，背景图片加载路径</span></span><br><span class="line">                        publicPath: <span class="string">&#x27;../../&#x27;</span> <span class="comment">// 组件正常引入使用的路径</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;, <span class="string">&#x27;css-loader&#x27;</span>]</span><br><span class="line">            &#125;, &#123;</span><br><span class="line">                test: <span class="regexp">/\.vue$/</span>,</span><br><span class="line">                use: <span class="string">&#x27;vue-loader&#x27;</span></span><br><span class="line">            &#125;, &#123;</span><br><span class="line">                test: <span class="regexp">/\.js$/</span>,</span><br><span class="line">                exclude: <span class="regexp">/node_modules/</span>, <span class="comment">// 排除node_modules，否则会报错</span></span><br><span class="line">                use: [<span class="string">&#x27;babel-loader&#x27;</span>]</span><br><span class="line">            &#125;, &#123;</span><br><span class="line">                test: <span class="regexp">/\.(jpg|svg|png|gif)$/</span>,</span><br><span class="line">                use: [&#123;</span><br><span class="line">                    loader: <span class="string">&#x27;url-loader&#x27;</span>,</span><br><span class="line">                    options: &#123;</span><br><span class="line">                        limit: <span class="number">3000</span>,</span><br><span class="line">                        name: <span class="string">&#x27;assets/img/[hash:8]-[name].[ext]&#x27;</span>,</span><br><span class="line">                        esModule: <span class="literal">false</span> <span class="comment">// 防止img src变为[object Module]，默认是es module语法，值为false则开始commonjs语法</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;]</span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;,</span><br><span class="line">        plugins: [</span><br><span class="line">            <span class="keyword">new</span> CleanWebpackPlugin(),</span><br><span class="line">            <span class="keyword">new</span> VueLoaderPlugin(),</span><br><span class="line">            <span class="keyword">new</span> MiniCssExtractPlugin(&#123;</span><br><span class="line">                filename: <span class="string">&#x27;assets/css/[hash:8]-[name].css&#x27;</span>,</span><br><span class="line">                chunkFilename: <span class="string">&#x27;[id].css&#x27;</span></span><br><span class="line">            &#125;),</span><br><span class="line">            <span class="keyword">new</span> htmlWebpackPlugin(&#123;</span><br><span class="line">                title: <span class="string">&quot;webpack打包vue项目&quot;</span>,</span><br><span class="line">                <span class="comment">// filename: &#x27;index.html&#x27;, // 不配置，默认为index.html</span></span><br><span class="line">                template: <span class="string">&#x27;public/index.html&#x27;</span></span><br><span class="line">            &#125;),</span><br><span class="line">            <span class="comment">// new htmlWebpackPlugin(&#123;</span></span><br><span class="line">            <span class="comment">//     title: &quot;webpack打包vue项目2&quot;,</span></span><br><span class="line">            <span class="comment">//     filename: &#x27;a.html&#x27;, // 不配置，默认为index.html</span></span><br><span class="line">            <span class="comment">// &#125;)</span></span><br><span class="line">        ],</span><br><span class="line">        devServer: &#123;</span><br><span class="line">            port: <span class="number">8080</span>, <span class="comment">// 指定端口号</span></span><br><span class="line">            host: <span class="string">&#x27;0.0.0.0&#x27;</span>, <span class="comment">// 局域网访问本地服务</span></span><br><span class="line">            open: <span class="literal">false</span>, <span class="comment">// 是否自动打开浏览器</span></span><br><span class="line">            hot: <span class="literal">true</span>, <span class="comment">// 开启模块热替换</span></span><br><span class="line">            overlay: &#123;</span><br><span class="line">                errors: <span class="literal">true</span> <span class="comment">// 将webpack编译的错误显示在网页上面</span></span><br><span class="line">            &#125;,</span><br><span class="line">            contentBase: path.join(__dirname, <span class="string">&#x27;dist&#x27;</span>),</span><br><span class="line">            historyApiFallback: <span class="literal">true</span>,</span><br><span class="line">            clientLogLevel: <span class="string">&quot;silent&quot;</span> <span class="comment">// 关闭控制台HMR的日志输出</span></span><br><span class="line">        &#125;,</span><br><span class="line">        optimization: &#123;</span><br><span class="line">            minimize: <span class="literal">true</span>,</span><br><span class="line">            minimizer: [<span class="keyword">new</span> CssMinimizerPlugin(), <span class="keyword">new</span> uglifyjsWebpackPlugin(&#123;</span><br><span class="line">                cache: <span class="literal">true</span>, <span class="comment">// 开启缓存</span></span><br><span class="line">                parallel: <span class="literal">true</span>, <span class="comment">// 开启多线程编译</span></span><br><span class="line">                sourceMap: <span class="literal">true</span>, <span class="comment">// 是否sourceMap</span></span><br><span class="line">                uglifyOptions: &#123;&#125;, <span class="comment">// 丑化参数</span></span><br><span class="line">            &#125;)]</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      
    </div>
    <div class="article-footer">
      <!-- <blockquote class="mt-2x"> -->
  <!-- <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://gitee.com/Yu-Luoboke/2021/03/09/webpack%E6%9E%84%E5%BB%BAvue%E9%A1%B9%E7%9B%AE/" title="webpack构建vue项目" target="_blank" rel="external">https://gitee.com/Yu-Luoboke/2021/03/09/webpack%E6%9E%84%E5%BB%BAvue%E9%A1%B9%E7%9B%AE/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul> -->
<!-- </blockquote> -->


<!-- <div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="http://yu-luoboke.gitee.io/blog" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/blog/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="http://yu-luoboke.gitee.io/blog" target="_blank"><span class="text-dark">雨落</span><small class="ml-1x">前端开发-奋斗青年</small></a></h3>
        <div>前端经验总结。</div>
      </div>
    </figure>
  </div>
</div> -->


    </div>
  </article>
  
    

  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    <li class="prev">
      <a href="/blog/2021/03/19/gitee-jenkins%E8%87%AA%E5%8A%A8%E5%8C%96%E6%9E%84%E5%BB%BA%E9%83%A8%E7%BD%B2/" title="gitee-jenkins自动化构建部署"><i class="icon icon-angle-left" aria-hidden="true"></i><span>&nbsp;&nbsp;上一篇</span></a>
    </li>
    
    
    <li class="next">
      <a href="/blog/2021/02/26/%E6%97%A5%E5%B8%B8%E8%AE%B0%E5%BD%95/" title="日常记录"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  
  <div class="bar-right">
    
  </div>
  </div>
</nav>
  


</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="http://yu-luoboke.gitee.io/blog" target="_blank" title="Github" ><i class="icon icon-github"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        &copy; 2024 lianghongming
        
        <div class="publishby">
        	Theme by <a href="https://gitee.com/Yu-Luoboke/blog" target="_blank"> blog </a>base on <a href="https://gitee.com/Yu-Luoboke/blog" target="_blank">pure</a>.
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/blog/js/plugin.min.js"></script>


<script src="/blog/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/blog/',
        CONTENT_URL: '/blog/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/blog/js/insight.js"></script>






   









</body>
</html>